<style lang="less">
.video-uploader{

}

.video-preview{
    display: inline-block;
    background: #FFF;
    width: 200px;
    min-height: 172px;
    overflow: hidden;
    text-align: center;
    vertical-align: top;
    position: relative;
    z-index: 2;

    video{
        height: auto;
        width: 100%;
    }

    & + .uploader{
        display: inline-block;
        vertical-align: top;

        .el-upload-list{
            li.is-success:first-child{
                margin-left: -152px;
            }
        }
    }
}
</style>
<template>
    <div class="video-uploader">
        <div class="video-preview" v-if="model">
            <video
                controls
                preload="metadata"
                v-if="model[modelUrlKey]"
                :src="model[modelUrlKey]"
            ></video>
        </div>
        <Uploader
            list-type="picture-card"
            v-model="model"
            :accept="accept"
            :model-url-key="modelUrlKey"
            :process-result="innerProcessResult"
            :on-upload="onUpload"
        >
            <i :class="[
                model && model[modelUrlKey]
                    ? 'el-icon-edit'
                    : 'el-icon-plus'
            ]"></i>
            <div class="tips">{{tips}}</div>
        </Uploader>
    </div>
</template>
<script>
import Promise from 'bluebird';

export default {
    components: {
        Uploader: require('./uploader'),
    },
    data() {
        return {
            model: null
        };
    },
    props: {
        accept: {
            type: String,
            default: 'video/mp4'
        },
        tips: {
            type: String,
            default: '仅支持 mp4 ，且不超过 5MB'
        },

        modelUrlKey: {
            type: String,
            default: 'url'
        },
        value: {
            type: Object,
            default: null
        },

        processResult: {
            type: Function,
            default(res) {
                return res;
            }
        },

        onUpload: {
            type: Function,
            default(res) {
                return res;
            }
        }
    },
    methods: {
        innerProcessResult(result) {
            return Promise.try(() => {
                return this.processResult(result);
            })
            .then(res => {
                return res || result;
            })
            .then(res => {
                this.$emit('input', res);
            });
        }
    },
    watch: {
        value(value) {
            this.model = value;
        }
    },
    created() {
        // window.x = this;
    }
};
</script>